<template>
  <zero-dialog :showDialog.sync="dialog.open" :width="dialog.width" :title="dialog.title"
               :fullscreen.sync="dialog.fullscreen" :id="dialog.id" :submit="submitForm">
    <div slot="body">
      <vxe-form :ref="form.ref" :data="form.info" :rules="form.rules" title-align="right" title-width="100">
        <vxe-form-item title="数据源" field="datasourceId" :item-render="{}" span="24">
          <template #default="{ data }">
            <vxe-select v-model="data.datasourceId" placeholder="请选择数据源" clearable @change="datasourceChange"
                        filterable>
              <vxe-option v-for="datasourceInfo in datasourceInfoList" :key="datasourceInfo.id"
                          :label="datasourceInfo.name" :value="datasourceInfo.id"></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>

        <vxe-form-item title="数据库" field="databaseName" :item-render="{}" span="24">
          <template #default="{ data }">
            <vxe-select v-model="data.databaseName" placeholder="请选择数据库" clearable @change="databaseChange"
                        filterable>
              <vxe-option v-for="databaseNameInfo in databaseNameInfoList" :key="databaseNameInfo.id"
                          :label="databaseNameInfo.name" :value="databaseNameInfo.id"></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>

        <vxe-form-item title="表信息" field="tableInfoList" :item-render="{}" span="24">
          <template #default="{ data }">
            <vxe-select v-model="data.tableInfoList" placeholder="请选择数据库" clearable filterable multiple>
              <vxe-option v-for="tableInfo in tableInfoList" :key="tableInfo.id"
                          :label="tableInfo.id + '' + tableInfo.name" :value="tableInfo.id"></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>
      </vxe-form>
    </div>
  </zero-dialog>
</template>


<script>
import addUpdate from '@/mixins/add-update.js';

export default {
  name: 'ImportTable',
  mixins: [addUpdate],
  data() {
    return {
      datasourceInfoList: [],//数据源
      databaseNameInfoList: [],//数据库
      tableInfoList: [],//表
      axios: this.$axiosGen, // 请求的微服务
      dialog: {
        width: '800px', //定义宽度
      },
      form: {//表单数据
        rules: { //表单验证
          name: [{required: true, message: "名称不能为空", trigger: "blur"}],
          groupCode: [{required: true, message: "分组编码不能为空", trigger: "blur"}],
          occupationPath: [{required: true, message: "占位路径不能为空", trigger: "blur"}]
        }
      }
    }
  },
  created() {

    let config = {
      url: "/datasourceInfo/select",
      method: 'get'
    }
    this.$axiosGen(config).then(res => {
      this.datasourceInfoList = res.data
    }).finally(() => {
    });
  },
  methods: {

    datasourceChange(data) {
      if (data.value) {
        let config = {
          url: "/datasourceInfo/databaseSelect/" + data.value,
          method: 'get'
        }
        this.$axiosGen(config).then(res => {
          this.databaseNameInfoList = res.data
        }).finally(() => {
        });
      } else {
        this.databaseNameInfoList = []
        this.tableInfoList = []
      }

    },
    databaseChange(data) {
      if (data.value) {
        let config = {
          url: "/datasourceInfo/tableInfoSelect",
          method: 'get',
          params: {datasourceId: this.form.info.datasourceId, databaseName: data.value}
        }
        this.$axiosGen(config).then(res => {
          this.tableInfoList = res.data
        }).finally(() => {
        });
      } else {
        this.tableInfoList = []
      }
    },
    submitForm() {
      this.$refs[this.form.ref].validate((valid) => {
        if (!valid) {
          //弹框的loading
          let loading = this.$loading({target: `#${this.dialog.id} >div >.el-dialog`});

          // 将选中的id数组转换为接口需要的格式
          const submitData = { ...this.form.info };
          if (submitData.tableInfoList && submitData.tableInfoList.length > 0) {
            submitData.tableInfoList = submitData.tableInfoList.map(id => {
              const tableInfo = this.tableInfoList.find(item => item.id === id);
              return { id: tableInfo.id, name: tableInfo.name };
            });
          }

          let config = {
            url: "/tableInfo/importGenInfo",
            method: 'post',
            data: submitData
          }
          this.axios(config).then(res => {
            this.$modal.msgSuccess(res.msg);
            this.getDataList()
            this.dialog.open = false;
          }).catch(() => {
          }).finally(() => {
            loading.close()
          });
        }
      })
    }
  }
}
</script>
